<template>
  <div class="app-layout">

    <!-- 顶部 header -->
    <header class="header">
      <h1>{{ routerLinkRef }}</h1>
    </header>

    <div class="main-content">

      <!-- 左侧导航 -->
       <!-- 冒泡事件 -->
      <nav class="sidebar" @click="handleNavClick">
        <router-link :to="{name: 'moduleone'}">父子之间的props传递</router-link><br/>
        <router-link :to="{name: 'moduletwo'}">父子之间的custom_event传递</router-link><br/>
        <router-link :to="{name: 'modulethree'}">mitt传递.任意组件之间传递</router-link><br/>
        <router-link :to="{name: 'modulefour'}">组件之间,v-model传递</router-link><br/>
        <router-link :to="{name: 'modulefive'}">父传孙,$attrs传递</router-link><br/>
        <router-link :to="{name: 'modulesix'}">$refs-$parents传递</router-link><br/>
        <router-link :to="{name: 'moduleseven'}">provide-inject传递</router-link><br/>
        <router-link :to="{name: 'moduleeight'}">pinia传递</router-link><br/>
        <router-link :to="{name: 'modulenine'}">slot_默认插槽传递</router-link><br/>
        <router-link :to="{name: 'moduleten'}">slot_具名插槽传递</router-link><br/>
        <router-link :to="{name: 'moduleeleven'}">slot_作用域插槽传递</router-link><br/>

      </nav>

      <!-- 右侧路由展示区域 -->
      <div class="router-view">
        <router-view></router-view>
      </div>

    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref,onUnmounted } from "vue";

  // 定义模板引用
  const routerLinkRef = ref<HTMLElement | null>(null);

  /**
 * 处理导航栏点击事件
 * 当点击a标签时，获取链接文本并赋值给routerLinkRef
 * @param event - 点击事件对象
 */
const handleNavClick = (event: MouseEvent) => {
  const target = event.target as HTMLElement;
  if (target.tagName === 'A') {
    const linkText = target.textContent;
    if (linkText) {
      // console.log(`点击了 ${linkText} 链接`);
      routerLinkRef.value = linkText;
    }
  }
};
</script>

<style scoped>

.app-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  background-color: #333;
  color: white;
  padding: 1rem;
  text-align: center;
}

.main-content {
  flex: 1;
  display: flex;
}

.sidebar {
  background-color: #f4f4f4;
  width: 300px;
  padding: 1rem;
}

.router-view {
  flex: 1;
  padding: 1rem;
}
button {
  /* background-color: #007bff; */
  color: green;
  border: none;
  padding: 0.5rem 1rem;
  margin-bottom: 2rem;
  cursor: pointer;
  border-radius: 4px;
}

</style>
